<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dict">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item v-if="showMs">
          <el-select
            v-model="dataForm.homestayId"
            placeholder="关联民宿"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in homestays"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.houseBaseId"
            placeholder="关联房型"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in roomTypes"
              :key="item.houseBaseId"
              :label="item.name"
              :value="item.houseBaseId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="showMs">
          <el-select
            v-model="dataForm.islandId"
            placeholder="所属区域"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in scenicOptions"
              :key="item.id"
              :label="item.scenicName"
              :value="item.scenicName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.orderStatus"
            placeholder="订单状态"
            clearable
          >
            <el-option
              :value="item.val"
              v-for="item in roomStatus"
              :key="item.val"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.orderCode"
            placeholder="请输入订单号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.guestName"
            placeholder="联系人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.guestPhone"
            placeholder="联系电话"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dataForm.arriveDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="到达时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dataForm.leaveDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="离开时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button  v-if="$hasPermission('hotel:report:room')" type="primary" @click="exportHandle()">导出</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="status">
            <span v-for="(item,index) in  statusArr" :class="currentIndex==index?'on':''" :style="{'background':item.color}" @click="checkStatus(item,index)">{{item.name}}</span>
        </div> -->
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        height="calc(100vh - 270px)"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="orderCode"
          label="订单编号"
          header-align="center"
          min-width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="guestSourceName"
          label="客户来源"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="islandName"
          label="所属区域"
          header-align="center"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="homestayName"
          label="所属酒店民宿"
          header-align="center"
          min-width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="houseBaseName"
          label="房型"
          min-width="120px"
          sortable="custom"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="roomNumbers"
          label="房号"
          sortable="custom"
          header-align="center"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="arriveDate"
          label="到达时间"
          header-align="center"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="leaveDate"
          label="离开时间"
          header-align="center"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="guestName"
          label="客户姓名"
          header-align="center"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="guestPhone"
          label="客户联系方式"
          header-align="center"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column label="订单状态" prop="orderStatus">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :style="{
                color: '#fff',
                background: roomStatusColor[scope.row.orderStatus],
              }"
              >{{
                !scope.row.orderStatus ? "" : scope.row.orderStatus | delStatus
              }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
var that;
import mixinViewModule from "@/mixins/view-module";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/hotel/report/getHouseReportList",
        getDataListIsPage: true,
        exportURL: "/hotel/report/exportHouseReport",
      },
      homestays: [],
      roomTypes: [],
      scenicOptions: [],
      statusArr: [
        {
          val: 1,
          name: "本日预抵",
          key: "arriveDate",
          date: 0,
          color: "#2853FB",
        },
        {
          val: 2,
          name: "当日在住",
          key: "arriveDate",
          date: 0,
          color: "#FF9900",
        },
        {
          val: 2,
          name: "本日预离",
          key: "leaveDate",
          date: 0,
          color: "#F26C30",
        },
        {
          val: 1,
          name: "次日预抵",
          key: "arriveDate",
          date: 1,
          color: "#7D80F2",
        },
        {
          val: 2,
          name: "次日预离",
          key: " leaveDate",
          date: 1,
          color: "#8FCD4E",
        },
      ],
      roomStatus: [
        {
          val: -2,
          label: "待支付",
        },
        {
          val: -1,
          label: "待确定",
        },
        {
          val: 1,
          label: "已预订",
        },
        {
          val: 2,
          label: "已入住",
        },
        {
          val: 3,
          label: "已退房",
        },
        {
          val: 4,
          label: "已取消",
        },
      ],
      roomStatusColor: {
        "-2": "#AAA",
        "-1": "#6faef1",
        1: "#f29130",
        2: "#67c23a",
        3: "#969799",
        4: "#AAA",
      },
      showMs: false,
      currentIndex: 0,
      dataForm: {
        islandId: "",
        homestayId: this.$store.state.user.homestayId||'',
        houseBaseId: "",
        orderStatus: "",
        orderCode: "",
        guestName: "",
        guestPhone: "",
        arriveDate: "",
        leaveDate: "",
      },
      dialogFormVisible: false,
    };
  },
  filters: {
    delStatus(val) {
      let d = that.roomStatus.filter((item) => item.val == val);
      if (d && d[0]) {
        return d[0].label;
      }
    },
  },
  created() {
    that = this;
    this.getHomestay();
    this.getScenicOptions();
    if (
      this.$store.state.user.roleList &&
      this.$store.state.user.roleList.indexOf("1712742759269081090") > -1
    ) {
      this.showMs = true;
    }
  },
  watch: {
    "dataForm.homestayId": {
      handler(newval, oldval) {
        if (newval && newval != oldval) {
          this.getRoomType();
        } else {
          this.roomTypes = [];
        }
      },
      immediate: true,
    },
  },
  methods: {
    getHomestay() {
      this.$http
        .get("/hotel/homestay/getHomestayDownBox")
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.homestays = res.data;
          }
        });
    },
    getRoomType() {
      this.$http
        .get(
          "/hotel/house/base/getHouseSearchBox/" + this.dataForm.homestayId
        )
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.roomTypes = res.data;
          }
        });
    },
    getScenicOptions() {
      this.$http
        .get("scenic/isscenic/selectScenicList", {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            console.log(res);
            this.scenicOptions = res.data;
          }
        });
    },
    checkStatus(item, index) {
      this.currentIndex = index;
      this.dataForm.orderStatus = item.val;
      //今天的日期
      var today = new Date();
      today.setTime(today.getTime());
      let mon1 = today.getMonth() + 1;
      let day1 = today.getDate();
      var todayStr =
        today.getFullYear() +
        "-" +
        (mon1 < 9 ? "0" + mon1 : mon1) +
        "-" +
        (day1 < 9 ? "0" + day1 : day1);
      //明天的日期
      var tomorrow = new Date();
      tomorrow.setTime(tomorrow.getTime() + 24 * 60 * 60 * 1000);
      let mon2 = tomorrow.getMonth() + 1;
      let day2 = tomorrow.getDate();
      var tomorrowStr =
        tomorrow.getFullYear() +
        "-" +
        (mon2 < 9 ? "0" + mon2 : mon2) +
        "-" +
        (day2 < 9 ? "0" + day2 : day2);
      let date = "";
      if (item.date == 0) {
        date = todayStr;
      } else {
        date = tomorrowStr;
      }
      if (item.key == "arriveDate") {
        this.dataForm.arriveDate = date;
        this.dataForm.leaveDate = "";
      } else {
        this.dataForm.leaveDate = date;
        this.dataForm.arriveDate = "";
      }
      this.getDataList();
    },
  },
};
</script>

<style lang="scss" scoped>
.status {
  margin-bottom: 20px;

  span {
    display: inline-block;
    width: 100px;
    height: 40px;
    background: #f29130;
    margin-right: 10px;
    color: #fff;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    border-radius: 4px;
    vertical-align: middle;

    &.on {
      border: 3px solid #17b3a3;
    }
  }
}
</style>
